<template>
  <div class="address">
    <van-nav-bar title="地址管理" left-arrow @click-left="onClickLeft" />
    <van-button plain icon="plus" type="primary" block @click="addEvt">添加地址</van-button>
    <!-- <van-button plain icon="" type="primary" block @click="updEvt">修改地址</van-button>
    <van-button plain icon="" type="primary" block @click="delEvt">删除地址</van-button>
    <van-button plain icon="" type="primary" block @click="selEvt">查看地址</van-button> -->
   <div class="add">
      <van-popup v-model="show" position="bottom" :style="{ height: '86%' }">
        <div> 
        <van-button @click="show = false" size="small" plain type="primary">取消</van-button>
        </div>
        <div>
          <van-address-edit
          :area-list="areaList"
          show-postal
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          :address-info="addressInfo"
          @save="onSave"
          @change-detail="onChangeDetail"
        />
        </div>
      </van-popup>
   </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import {addressAddApi,addressListApi} from '../../apis/meApi'
export default {
  data(){
    return{
      show: false,
      checked:false,
      areaList,
      searchResult: [],
       addressInfo: {
            id: '1',
            tel:'',
            addressDetail: '',
            areaCode: '',
            isDefault: false
        },
    }
  },
  computed:{
      getUser(){
          return this.$store.getters["common/user"]
      }
  },
   created() {
        this.getList()
        },
  methods:{
    addEvt(){
      this.show=true
    },
    onClickLeft(){
      this.$router.push("/index/me")
    },
     async getList() {
       let result = await addressListApi(this.getUser.id)
            },
       // 添加用户地址 {userId: string, name: string, phone: string, address: string, tag: string}
            async onSave() {
                 await addressAddApi({
                    userId: this.getUser.id,
                    name: this.addressInfo.name,
                    phone: this.addressInfo.tel,
                    address: `${this.addressInfo.province}/${this.addressInfo.city}/${this.addressInfo.county}/${this.addressInfo.addressDetail}`,
                    tag: '公司'
                }).then(d=>{
                  if(d.code==200){ 
                    this.$toast.success('新增地址成功')
                    this.show = false
                    this.getList()
                  }
                  
                })
            },
      onChangeDetail() {
    },
  },
}
</script>
<style>
</style>